import React from 'react';
//  封装饼图组件
//  01: 接收的属性有哪些?  数据 接收图例是否显示 样式 标题 等等数据
//  02: 对类型属性的约束   样式大小. 数据应该是数组结构, 是否显示图例为boolean
//  03: 设置默认的属性     样式默认值, 是否缩放
//  04: 考虑插槽的灵活使用  
import * as echarts from 'echarts';
import styled from 'styled-components';
import { useEffect, useLayoutEffect } from 'react'
import Pts from 'prop-types'
const Pie = (props) => {
    // 如下写法 提示 invalid dom 报错
    console.log('props', props);
    useEffect(() => {
        // 01: 获取DOM容器
        var myChart = echarts.init(document.getElementById(props.id));
        //02: 设置图表配置项
        let option = {
            title: {
                text: props.title,
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            // legend: {
            //     orient: 'vertical',
            //     left: 'left' 
            // },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: props.data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        if (props.islenged) {
            option.legend = {
                orient: 'vertical',
                left: 'left'
                // 设置占比选项, 提示有  占比 :20%
            }
        }
        // 03: 给实例传递配置项
        myChart.setOption(option);

    }, [])
    // console.log('myChart', myChart);

    return (
        <div id={props.id} style={{ width: props.w, height: props.h }}>

        </div>
    );
}

// 设置参数的类型校验
Pie.propTypes = {
    id: Pts.string.isRequired,
    data: Pts.array.isRequired,
    title: Pts.string.isRequired
}

Pie.defaultProps = {
    w: '100%',
    h: '300px',
    islenged: true  // 默认显示图例
}

export default Pie;
